<template>
  <div class="search">
    <input type="text" v-model="phoneNum" class="input" placeholder="请输入手机号码">
    <button class="button" @click="sendData">查询</button>
  </div>
</template>

<script setup lang="ts">
import { get } from '@/HTTP/api';
import { onMounted, reactive, ref } from 'vue';

  import emitter from '@/utis/emitter';

  // 手机号码
  let phoneNum =  ref('')

  const key = '709dbdc68e7d552fa0fdf525cf8c74d1'
  

// 发起请求获取数据
  function getObj(){
    console.log("获取列表触发了");
      get(`http://localhost:5173/api/mobile/get?phone=${phoneNum.value}&key=${key}`).then(
        (data:any) =>{
          
          if(data.error_code === 0){ 
           
            emitter.emit('send-phoneData',data.result)

          }else if(data.error_code === 201101){
              alert('手机号码不能为空')
          }else if(data.error_code === 201102){
              alert('错误的手机号码')
          }else if(data.error_code === 201103){
              alert('查询无结果')
          }

        }
      )
  }




  // 点击查询，获取数据，并且将输入框清空
  function sendData(){
      getObj() 
      phoneNum.value = ''
  }
 


</script>

<style scoped>
.search {
  display: flex;
  width: 95%;
  margin: 10px;
}

.search input.input {
  flex: 3;
  margin: 2px;
  border-radius: 2px;
  border: 1px solid #ccc;
  background-color: white;
  height: 30px;
  padding: 5px;
  font-size: 14px;
  color: #666;
}

.search button.button {

  flex: 1;
  margin: 2px;
  border-radius: 2px;
  border: 0;
  background-color: #666;
  color: white;
  cursor: pointer;
}

.search button.button:hover {
  background-color: #333;
}
</style>